<!--
 * @Author: your name
 * @Date: 2021-12-16 19:49:46
 * @LastEditTime: 2021-12-22 14:47:37
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \group5_am-master\am-dashboard\src\pages\government\components\Bottom1.vue
-->
<template>
  <!-- 1. 容器 -->
  <div ref="Bottom1_container" style="height:100%"> </div>
</template>

<script>
// 2. 导入图表构造函数
import { Column } from '@antv/g2plot';
import { get } from '../../../utils/request';
export default {
  data(){
    return{
      dd:[]
    }
  },
 async mounted() {
   await this.loaddata();
    // 4. 页面渲染的时候初始化图表
    this.initChart()
  },
  methods:{
   async loaddata(){
      let url ="/dashboard/queryEngineerBindDeviceNumber"
      let resp = await get (url);
      this.dd = resp.data;
    },
    //3. 初始化图表
    initChart(){
  const data = this.dd;
      const column = new Column(this.$refs.Bottom1_container, {
      data,
      xField: 'type',
      yField: 'value',
      seriesField: 'type',
     
      legend: {
        position: 'right',
       
       itemValue: {
        
          formatter: (_text, item) => {
            const items = data.filter((d) => d.type === item.value);
            return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-';
          },
           
          style: {
            opacity: 0,
          },
        },
      
      },
    });

    column.render();
    }
   }
  }
</script>